<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{gdp.info}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-60; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth/3;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{getGdpinfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'GdpId',name : 'GdpId',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{gdp.date}]]*/"",name : 'myDate',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{gdp.value}]]*/"",name : 'gdpValue',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{gdp.up}]]*/"",name : 'gdpUp',width : _columnWidth, sortable : true,align : 'center'},
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowbinddata : true
            });
            $("#flexigrid-id").flexReload();
            queryBtn();
            //查询用户管理模块的用户信息
            function queryBtn() {
                var searchOfferDate = $("#search-date-id").val();
                $("#flexigrid-id").flexOptions({
                    extParam:[
                        {name:"searchOfferDate",value:searchOfferDate}
                    ]
                }).flexReload();
            }


            $("#query-btn-id").click(function (event) {
                event.stopPropagation();
                queryBtn();
            })
        });


    </script>
    <script th:src="@{/amcharts/amcharts.js}" type="text/javascript"></script>
    <script th:src="@{/amcharts/serial.js}" type="text/javascript"></script>
    <title th:text="#{report.gdp.title}"></title>
    <script th:inline="javascript">
        $(function () {
            $("ul#tab-ul-menu-id > li").click(function(event) {
                $("ul#tab-ul-menu-id .active").removeClass("active");
                $(this).addClass("active");

                $("section.tab-content .in").removeClass("in");
                $("section.tab-content .active").removeClass("active");
                var tab = $(this).attr("tab");
                $("#" + tab).addClass("in");
                $("#" + tab).addClass("active")
            });
            $("ul#tab-ul-menu-id > li:first").click();
            queryGdp();


        });//ready
        function queryGdp() {
            var chartData = [
                {
                    "date": "2018-01-01",
                    "price": 0.85
                },
                {
                    "date": "2018-04-01",
                    "price": 0.88
                },
                {
                    "date": "2018-07-01",
                    "price": 0.95
                },
                {
                    "date": "2018-10-01",
                    "price": 0.79
                },
                {
                    "date": "2019-01-01",
                    "price": 0.63
                },
                {
                    "date": "2019-04-01",
                    "price": 0.85
                },
                {
                    "date": "2019-07-01",
                    "price": 0.7
                },
                {
                    "date": "2019-10-01",
                    "price": 0.11
                },
                {
                    "date": "2020-01-01",
                    "price": 0.12
                },
                {
                    "date": "2020-04-01",
                    "price": 0.1
                },
                {
                    "date": "2020-07-01",
                    "price": 0.9
                },
                {
                    "date": "2020-10-01",
                    "price": 0.8
                }


            ];
            loadChart(chartData);

        }

        function loadChart(chartData) {
            var chart;
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "../amcharts/images/";
            chart.dataProvider = chartData;
            chart.categoryField = "date";
            chart.dataDateFormat = "YYYY-MM";

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
            categoryAxis.minPeriod = "MM"; // our data is daily, so we set minPeriod to DD
            categoryAxis.dashLength = 1;
            categoryAxis.gridAlpha = 0.15;
            categoryAxis.axisColor = "#DADADA";
            categoryAxis.title="month"

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.axisColor = "#DADADA";
            valueAxis.dashLength = 1;
            valueAxis.logarithmic = true; // this line makes axis logarithmic
            chart.addValueAxis(valueAxis);

            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.type = "smoothedLine";
            graph.bullet = "round";
            graph.bulletColor = "#FFFFFF";
            graph.bulletBorderColor = "#00BBCC";
            graph.bulletBorderAlpha = 1;
            graph.bulletBorderThickness = 2;
            graph.bulletSize = 7;
            graph.title = "Price";
            graph.valueField = "price";
            graph.lineThickness = 2;
            graph.lineColor = "#00BBCC";
            chart.addGraph(graph);

            // CURSOR
            var chartCursor = new AmCharts.ChartCursor();
            chartCursor.cursorPosition = "mouse";
            chart.addChartCursor(chartCursor);

            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chart.addChartScrollbar(chartScrollbar);

            // WRITE
            chart.write("chartdiv");
        }


    </script>
</head>
<body>
<ul id="tab-ul-menu-id" class="nav nav-tabs">
    <li tab="tab-i18n-id">
        <a href="#">
            <i class="fa fa-area-chart"></i>
            <span th:text="#{report.char}"></span>
        </a>
    </li>
    <li tab="tab-son-menu-id">
        <a href="#">
            <i class="fa fa-calendar"></i>
            <span th:text="#{report.table}"></span>
        </a>
    </li>
</ul>
<section class="tab-content">
    <div>
        <input type="text" id="#search-date-id" th:placeholder="#{Quoteinfo.startdate}">
        <a href="#" id="query-btn-id" class="navbar-btn">
            <i class="glyphicon glyphicon-zoom-in"></i>
            <span th:text="#{common.query}"></span>
        </a>
    </div>
    <article id="tab-i18n-id" class="tab-pane fade in active">
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
    </article>
    <article id="tab-son-menu-id" class="tab-pane fade">
    </article>
</section>

<span th:text="#{Quoteinfo.info}"></span>
<table id="flexigrid-id"></table>
</body>
</html>